<template>
    <div class="box7">
        <div class="title">
            <p> 年度游客量对比</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>

        <div class="charts" ref="charts">

        </div>
    </div>
</template>

<script setup lang='ts' name='Year'>

import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

let charts = ref();

onMounted(() => {
    let mychart = echarts.init(charts.value)
    mychart.setOption({
        title: {
            text: '散点图',
            left: '45%',
            textStyle: {
                color: 'skyblue',
                fontSize: 20,
            },
        },
        xAxis: {
            type: 'category',
            show: false,
        },
        yAxis: {
            show: false
        },
        grid: {
            left: 20,
            right: 0,
            top: 20,
            bottom: 20
        },
        series: {
            type: 'scatter',
            data: [33, 88, 21, 9, 43, 200, 1312, 700, 920, 483, 230],
            // 标记图形设置
            symbol: 'arrow',
            label: {
                show: true,
                position: 'top'
            }
        }
    })
})
</script>

<style scoped lang='scss'>
.box7 {
    width: 100%;
    height: 100%;
    background: url('../../images/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;

    .title {
        margin-left: 20px;

        p {
            color: white;
            font-size: 20px;
        }
    }

    .charts {
        height: calc(100% - 40px);
    }
}
</style>